/*eslint-disable*/
// 登陆页面

import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  ImageBackground,
  Dimensions,
  TextInput,
  Alert,
  TouchableHighlight,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import IconAntd from 'react-native-vector-icons/AntDesign';
import {Navigation} from 'react-native-navigation';

const {width, height} = Dimensions.get('window');

const Login = (props: any) => {
  const [value, setValue] = useState('');
  const [isNewPhone, setIsNewPhone] = useState(true);

  // 验证手机号码
  const goLogin = () => {
    const reg =
      /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    if (reg.test(value)) {
      const page = isNewPhone ? 'InputAuthCode' : '';
      // 方案一：有后退按钮
      Navigation.push(props.componentId, {
        component: {
          name: page,
          passProps:{  // 向下一个导航页，传参
            phoneVal: value
          }
        },
      });

      // 方案二： 没用回退按钮，关闭Navigation.dismissModal()
      // Navigation.showModal({
      //   stack:{
      //     children:[
      //       {
      //         component:{
      //           name: page,
      //           passProps:{  // 向下一个导航页，传参
      //             phoneVal: value
      //           }
      //         }
      //       }
      //     ]
      //   }
      // })
    } else {
      Alert.alert('手机号格式输入错误');
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <ImageBackground source={require('../assets/loginBg.jpg')} style={styles.bgImg}>
        <View style={styles.loginPage}>
          <View style={styles.header}>
            <View style={styles.headerText}>
              <Text style={styles.headerTextInfo1}>手机登陆 / 注册</Text>
              <Text style={styles.headerTextInfo2}>
                未注册手机验证后自动登陆
              </Text>
            </View>
            <View style={styles.headerPhone}>
              <Text style={{color: 'white', fontSize: 18}}>+86</Text>
              <Text style={styles.headerPhoneIcon}>
                <Icon name="sort-down" size={22} color="#fff"></Icon>
              </Text>
              <TextInput
                style={styles.headerPhoneInput}
                onChangeText={text => setValue(text)}
                value={value}
                keyboardType="phone-pad"
                maxLength={11}
                placeholderTextColor="white"
                placeholder="请输入11位手机号"
                onFocus={() => setValue('')}
                onSubmitEditing={goLogin}
              />
            </View>
            <TouchableHighlight
              style={styles.headerSubBtn}
              activeOpacity={0.6}
              underlayColor="#DDD"
              onPress={() => {}}>
              <View style={styles.loginButton}>
                <Text style={styles.loginButtonText} onPress={goLogin}>
                  一键登录
                </Text>
              </View>
            </TouchableHighlight>
          </View>
          <View style={styles.bottom}>
            <View style={styles.loginOther}>
              <Text style={styles.loginOtherText}>其他登陆方式</Text>
            </View>
            <View style={styles.loginOtherLists}>
              <TouchableHighlight
                activeOpacity={0.6}
                underlayColor="rgba(0,0,0,0.5)"
                style={styles.loginOtherIconWrap}>
                <Icon
                  name="weixin"
                  size={20}
                  style={styles.loginOtherIcon}></Icon>
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.6}
                underlayColor="rgba(0,0,0,0.5)"
                style={styles.loginOtherIconWrap}>
                <Icon name="qq" size={20} style={styles.loginOtherIcon}></Icon>
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.6}
                underlayColor="rgba(0,0,0,0.5)"
                style={styles.loginOtherIconWrap}>
                <Icon
                  name="weibo"
                  size={20}
                  style={styles.loginOtherIcon}></Icon>
              </TouchableHighlight>
              <TouchableHighlight
                activeOpacity={0.6}
                underlayColor="rgba(0,0,0,0.5)"
                style={[
                  styles.loginOtherIconWrap,
                  styles.loginOtherIconWrapLast,
                ]}>
                <IconAntd
                  name="alipay-circle"
                  size={20}
                  style={styles.loginOtherIcon}></IconAntd>
              </TouchableHighlight>
            </View>
            <View>
              <Text style={styles.agreement}>
                登陆即代表同意协议 运动GO
                <Text style={styles.agreementText}> 用户协议 </Text>和
                <Text style={styles.agreementText}> 用户协议 </Text>
              </Text>
            </View>
          </View>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
};

export default Login;

Login.options = {
  topBar: {
    visible: false,
  },
  statusBar: {
    visible: false,
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bgImg: {
    width,
    height,
    resizeMode: 'cover'
  },
  loginPage: {
    height,
    backgroundColor: 'rgba(0,0,0,0.3)',
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingHorizontal: 40,
  },
  header: {
    height: '50%',
    width: '100%',
    display: 'flex',
    justifyContent: 'space-around',
  },
  headerText: {
    paddingTop: 80,
    paddingBottom: 20,
  },
  headerTextInfo1: {
    color: 'white',
    paddingBottom: 10,
    fontSize: 20,
  },
  headerTextInfo2: {
    color: 'white',
  },
  headerPhone: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    height: 50,
    borderRadius: 40,
    marginBottom: 10,
    backgroundColor: 'rgba(255,255,255,0.5)',
    paddingHorizontal: 40,
  },
  headerPhoneInput: {
    color: 'white',
    flexGrow: 1,
    height: 50,
    borderWidth: 0,
    fontSize: 18,
  },
  headerPhoneIcon: {
    marginHorizontal: 5,
    position: 'relative',
    top: -3,
  },
  headerSubBtn: {
    borderRadius: 40,
  },
  loginButton: {
    paddingHorizontal: 40,
    paddingVertical: 15,
    backgroundColor: 'rgba(3,118,191,0.7)',
    borderRadius: 40,
  },
  loginButtonText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 16,
  },
  bottom: {
    height: '50%',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'column',
    paddingBottom: 40,
  },
  loginOther: {},
  loginOtherLists: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    marginTop: 20,
  },
  loginOtherIcon: {
    color: 'white',
  },
  loginOtherIconWrap: {
    width: 50,
    height: 50,
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius: 50,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 30,
  },
  loginOtherIconWrapLast: {
    marginRight: 0,
  },
  loginOtherText: {
    textAlign: 'center',
    color: 'white',
  },
  agreement: {
    color: '#fff',
    fontSize: 13,
    marginTop: 10,
  },
  agreementText: {
    textDecorationLine: 'underline',
  },
});
